<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0 auto;
            height: 2500px;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        .floor1 {
            height: 500px;
            background-color: pink;
        }

        .floor2 {
            height: 500px;
            background-color: red;
        }

        .floor3 {
            background-color: yellowgreen;
            height: 500px;
        }

        .floor4 {
            background-color: orange;
            height: 500px;
        }


        /* 导航栏 */
        .nav {
            opacity: 0;
            width: 40px;
            height: 304px;
            border: 1px solid black;
            position: fixed;
            right: 88px;
            top: 100px;
            transition: all 0.5s;
        }



        .nav ul li {
            height: 70px;
            /* flex: 1; */
            text-align: center;
            line-height: 70px;
            margin-top: 6px;
        }

        .nav ul .color {
            color: red;
        }
    </style>

</head>

<body>
    <!-- 楼层 -->
    <div class="w floor1 ">111 </div>
    <div class="w floor2">222</div>
    <div class="w floor3">333</div>
    <div class="w floor4">444</div>


    <!-- 导航栏 -->
    <div class="nav">
        <ul>
            <li class="color" data-id="0">1层</li>
            <li data-id="1">2层</li>
            <li data-id="2">3层</li>
            <li data-id="3">4层</li>
            <li data-id="0">返顶</li>
        </ul>
    </div>
</body>

<script>
    // 导航栏
    (function () {
        window.addEventListener('scroll', function () {
            const i = document.documentElement.scrollTop
            console.log(i);
            if (i >= 180) {
                document.querySelector('.nav').style.opacity = 1
            }

            else {
                document.querySelector('.nav').style.opacity = 0
            }
        })
        // 电梯层数按钮
        const ul = document.querySelector('.nav ul')
        const li = document.querySelectorAll('.nav ul li')
        ul.addEventListener('click', function (e) {
            if (e.target.tagName === 'LI') {
                document.querySelector('.color').classList.remove('color')
                e.target.classList.add('color')
                const n = document.querySelectorAll('.w')
                console.log(n);
                const num = e.target.dataset.id
                document.documentElement.scrollTop = `${n[num].offsetTop}`

            }
        })

    })();

    (function () {
        //    排他清除原先样式

        const floor1 = document.querySelector('.floor1')
        const floor2 = document.querySelector('.floor2')
        const floor3 = document.querySelector('.floor3')
        const floor4 = document.querySelector('.floor4')
        // 电梯层数显示器
        window.addEventListener('scroll', function () {
            const ppp = document.querySelector('.color')
            ppp.classList.remove('color')


            const n = document.documentElement.scrollTop
            if (n >= floor1.offsetTop && n < floor2.offsetTop) {
                document.querySelector('.nav ul li:nth-child(1)').classList.add('color')
            }
            else if (n >= floor2.offsetTop && n < floor3.offsetTop) {
                document.querySelector('.nav ul li:nth-child(2)').classList.add('color')
            }
            else if (n >= floor3.offsetTop && n < floor4.offsetTop) {
                document.querySelector('.nav ul li:nth-child(3)').classList.add('color')
            }
            else if (n >= floor4.offsetTop) {
                document.querySelector('.nav ul li:nth-child(4)').classList.add('color')
            }

        })
    })();



</script>

</html>